CSS(カスケーディングスタイルシート)を利用すると、ホームページに表示されるマウスカーソルの形状を変化させることができます。
もちろん、ページ全体にわたってカーソル形状を変化させることも可能ですし、特定の範囲だけカーソル形状を変化させることもできます。
今週は、マウスカーソルの形状を変化させる方法を紹介してみましょう。

→
 
マウスカーソルの形状を変化させるCSSのプロパティ名は「cursor」です。
この「cursor」の値を変化させることにより、マウスカーソルの形状を自由に変更することが可能です。
ページ全体にわたってマウスカーソルの形状を変化させる場合は、BODYタグにCSSを適用させるようにしてください。
なお「cursor」に指定できる値は以下のとおりです。
※各設定値の上にマウスカーソルを移動させると、カーソル形状を確認できます。
設定値カーソル形状
auto カーソル形状を内容に応じて自動的に変更します(初期値)
default デフォルトのカーソル形状
crosshair 十字のカーソル形状
pointer 人差し指を伸ばしたカーソル形状
text テキスト用のカーソル形状
move 十字矢印のカーソル形状
wait 砂時計(時計)のカーソル形状
help ヘルプ用のカーソル形状
n-resize 上下の矢印、または上向きの矢印
s-resize 上下の矢印、または下向きの矢印
w-resize 左右の矢印、または左向きの矢印
e-resize 左右の矢印、または右向きの矢印
nw-resize 斜めの矢印、または左上向きの矢印
ne-resize 斜めの矢印、または右上向きの矢印
sw-resize 斜めの矢印、または左下向きの矢印
se-resize 斜めの矢印、または右下向きの矢印

※「cursor」のCSSに対応しているブラウザはInternet Explorer 4以上、およびNetscape 6以上となります。

<BODY bgcolor="#FFFFFF" text="#000000" style="cursor:crosshair">
このページはマウスカーソルの形状を変えています。<BR>
(対応ブラウザ:Internet Explorer 4以上、Netscape 6以上)<BR>
ただし、リンクが設定されている部分のカーソル形状は通常と同じ。<BR>
<BR>
<A href="http://www.infoseek.co.jp/">infoseekで検索</A>
</BODY>


→
 
BODYタグに「cursor」のCSSを適用したとしても、リンクが設定されている文字や画像の上にマウスカーソルを移動させると、カーソル形状は自動的にポインタ形状(人差し指が伸びたカーソル形状)に変化してしまいます。
リンク部分のカーソル形状を変更させたい場合は、Aタグに「cursor」のCSSを適用させるようにします。
<BODY bgcolor="#FFFFFF" text="#000000" style="cursor:crosshair">
このページはマウスカーソルの形状を変えています。<BR>
(対応ブラウザ:Internet Explorer 4以上、Netscape 6以上)<BR>
<BR>
<A href="http://www.infoseek.co.jp/">infoseekで検索</A><BR>
<A href="http://www.infoseek.co.jp/Help/" style="cursor:help">infoseekの使い方</A>
</BODY>


→
 
特定の範囲だけカーソル形状を変化させる場合は、DIVタグを使って範囲をブロック化し、このDIVタグに対して「cursor」のCSSを適用させればOKです。
このように、どこでマウスカーソルの形状を変化させるかは、CSSを適用させるタグを工夫することにより自由に設定することが可能です。
もちろん、BODYタグに「cursor」のCSSを適用しなかった場合は、通常は普通のカーソル形状、特定範囲の上にマウスカーソルがきたときだけ指定したカーソル形状とすることが可能です。
<DIV style="cursor:wait">
この部分にマウスカーソルを持ってくると、<BR>
カーソルの形状が変わります。
</DIV>

G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI